<template>
  <div id="form">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
      label-position="left">
      <el-form-item label="班级" prop="selectClass">
        <el-select v-model="formData.selectClass" placeholder="请选择班级" clearable :style="{width: '100%'}" @change="changeClass">
          <el-option v-for="child in childsJson" :key="child.class" :value="child.name">{{child.name}}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="幼儿名称" prop="childName">
        <el-input v-model="formData.childName" type="textarea" placeholder="请选择输入名字(以逗号隔开)幼儿幼儿名称"
          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="家长接龙" prop="jieLong">
        <el-input v-model="formData.jieLong" type="textarea" placeholder="请输入家长接龙"
          :autosize="{minRows: 6, maxRows: 10}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item size="large" label-position="center">
        <el-button type="primary" @click="filter">筛选</el-button>
      </el-form-item>
    </el-form>
    <el-card class="box-card">
      <div>{{count}}</div>
      <br/>
      <div v-for="item in parents" :key="item" class="text item">
        {{item}}
      </div>
    </el-card>
  </div>
</template>
<script>

export default {
  components: {},
  props: [],
  data () {
    return {
      formData: {
        selectClass: '',
        childName: '',
        jieLong: ''
      },
      rules: {
        selectClass: [{
          required: true,
          message: '请选择班级',
          trigger: 'change'
        }],
        childName: [{
          required: true,
          message: '请选择输入名字(以逗号隔开)幼儿幼儿名称',
          trigger: 'blur'
        }],
        jieLong: [{
          required: false,
          message: '请输入家长接龙',
          trigger: 'blur'
        }]
      },
      childsJson: [
        {class: 'class-qiuqiu', name: '邱秋', childs: '彭芝源,桂梓轩,陈瑞森,吴浥尘,韩沐瑶,王高乐,兰锦鹏,刘哲宇,彭多米,马姜,邹馨宁,李奇林,熊彦羽,刘玺轩,徐思妍,王梓楠,郭致远,吴依遥,范跃程,黄诗颖,严雨昕,王若伊,肖梓宁,陈蔚宁,尹伊然,郭一玚,祝子彤,江艺馨,王凯鑫,韦铃悦,李筱'},
        {class: 'class-pengyuan', name: '彭媛', childs: '罗文悦,张悦涵,李嘉文,高婕雯,钟广毅,屠成宜,陈奕均,赖云晗,沈梓添,苏诗月,杨皓晨,秦宇潇,岳巨梓乐,黄钰轩,高子皓,陈慕阳,冯楷信,刘恺俊,蒋语阳,李思路,万昱圻,杨籽玲,杜蒲映姗,陈峻熙,廖宸悠,李璟岐,甘宇宸,梁佳悦,李林雨杭,李彬睿'},
        {class: 'class-chenxin', name: '陈鑫', childs: '林一,梁梓文,王知翊,吴云帆,周真竹,万天思岑,徐思琪,陈洛言,杜宜诺,周敬尧,文一朵,王星惟,杜家辉,陈峒羽,张奕楠,张曦予,何彦辰,刘梓涵,杜禹泽,罗文汐,兰雨泽,谢菀宸,洪星,杨宜果,杜悦然,宋雨牧,贾鸿轩,伍君宇,肖艺萱,陈博文,张赞宇'},
        {class: 'class-leihuan', name: '雷欢', childs: '乔琳涵,杜曼琳,梁骄灵,邓伊辰,谭力,张槿芸,易卓凡,陈璟橙,唐希芮,鲍继乾,张嘉恒,李彦杰,丁语偲,朱浩铭,胡杰豪,邓棋允,陶言蹊,陈泓宇,肖俊霖,孙琳雅,许轩齐,周宇皓,张嘉朗,杨子赫,谭知言,周雨萱,王程萱,杨佳乐,刘佳仪,黄承宇'},
        {class: 'class-gengshiyu', name: '耿诗瑜', childs: '陈抒妍,杨欣玥,王家源,欧许淞,李维子轩,杨思睿,刘睿行,何欣瞳,易瑾宸,林恩乐,高博衍,王佳欣,郎斯宇,葛静晨,杨浚宸,胡葆琛,黄俊棋,卢泓聿,陈乐川,刘若希,李秋潼,宫皓冉,杨可薇,宋之画,董津辰,杨彧骁,顾念,黄芊妤,王子明,张梓欣,郑宇童,陈逸默,余思佟,蒋予稣,曾博约'}
      ],
      child: {},
      parents: [],
      count: ''
    }
  },
  computed: {},
  watch: {},
  create: function () {},
  mounted: function () {
    this.child = this.childsJson[0]
    this.fullChildName()
  },
  methods: {
    init () {},
    fullChildName () {
      var that = this
      that.formData.selectClass = that.child.name
      that.formData.childName = that.child.childs
    },
    changeClass () {
      var that = this
      for (var key in that.childsJson) {
        var tmp = that.childsJson[key]
        if (tmp.name === that.formData.selectClass) {
          that.child = tmp
        }
      }
      if (that.child !== undefined) {
        that.fullChildName()
      }
    },
    filter () {
      var that = this
      that.parents = []
      var childNameStr = that.formData.childName
      if (childNameStr === undefined || childNameStr === '') {
        // that.formData.jieLong = ''
        // document.getElementById("count").innerHTML = "";
        that.count = ''
        alert('请输入娃儿名字')
        return false
      }
      var childs = childNameStr.trim().split(',')
      var jielong = that.formData.jieLong
      const th = that
      childs.forEach(function (item, index) {
        if (jielong.indexOf(item) === -1) {
          th.parents.push(item)
        }
      })

      var childLenght = childs.length
      var parentLength = that.parents.length
      that.count = '共有' + childLenght + '个娃娃，已有' + (childLenght - parentLength) + '个娃娃接龙，还有' + parentLength + '个娃娃没有接龙。'
    }
  }
}
</script>
<style>

</style>
